<!-- 歌单的歌曲页面 -->
<template>
  <div>
    <!-- 顶部 -->
    <van-sticky>
      <div class="top_div">
        <div class="return_div" @click="this.$router.back()">
          <van-icon name="arrow-left" />
        </div>
      </div>
    </van-sticky>

    <!-- 搜索框 -->
    <van-search
      v-model="searchKey"
      placeholder="请输入搜索歌曲"
      input-align="center"
      @search="onSearch"
      @update:model-value="onSearch"
    />

    <!-- 歌单的歌曲列表 -->
    <div class="songList_main">
      <div class="icon_music_songlist">
        <van-icon name="music-o" color="#0088A8" />
        歌单
        <span class="songlist_song_num">（共{{ songListLength }}首）</span>
        <div class="line"></div>
      </div>
      <div v-for="(item, index) in tempSongs" :key="index">
        <div class="per_song">
          <div class="index_song_sort">{{ index + 1 }}</div>
          <div class="song_name_singer" @click="toSongPage(item.al.id)">
            <div class="song_name">{{ item.name }}</div>
            <div class="song_singer"><span v-for="(item1,index1) in item.ar" :key="index1">{{ item1.name }}&nbsp;</span></div>
          </div>
          <div @click="shareShow = true">
            <van-icon name="ellipsis" size="20px" color="#909399" />
          </div>
        </div>
        <div class="line"></div>
      </div>
    </div>

    <!-- 分享面板 -->
    <van-share-sheet
      v-model:show="shareShow"
      title="立即分享给好友"
      :options="shareOptions"
      @select="goShare"
    />
  </div>
</template>

<script>
import { Toast } from 'vant';
import { getThisSongListAllInfo, getGeDanDetail } from '../../api/music'
export default {
  data() {
    return {
      songListName: '', // 歌单名称
      songListLength: '30', // 这个歌单有多少首歌
      songs: [], // 这个歌单的歌曲列表
      tempSongs: [], // 搜索关键字之后筛选的歌曲列表
      songListAid: this.$route.query.songListAid, // 歌单aid
      searchKey: '', // 搜索歌曲的关键字
      shareShow: false, // 分享面板展示
      shareOptions: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ], // 分享面板里面的内容
    }
  },
  created() {
    // 获取这个歌单的所有信息
    this.getThisSongListAllInfoFunc();
  },
  methods: {
    // 搜索关键字
    onSearch() {
      const _this = this
      setTimeout(() => {
        var list = _this.songs.filter(item => item.name.indexOf(_this.searchKey) >= 0);
        _this.tempSongs = list;
      }, 500)
    },

    // 获取这个歌单的所有信息
    getThisSongListAllInfoFunc() {
      getThisSongListAllInfo(this.songListAid).then((res) => {
        // console.log(this.songListAid)
        // console.log(res)
        if(res.data == null){
          Toast({
            message: '网络太拥挤，请稍后再试！',
            type: 'fail',
            duration: 700
          })
        }else{
          this.songListLength = res.data.data.songs ? res.data.data.songs.length : '0'
          this.songs = res.data.data.songs
          this.tempSongs = this.songs;
        }
        
      })
      getGeDanDetail(this.songListAid).then(res=>{
        console.log(res);
        this.songListName = res.data.data.playlist.name;
      })
    },

    // 点击分享
    goShare(options, index) {
      this.$toast({
        message: options.name,
        icon: options.icon,
        duration: 1000,
      })
    },

    // 去歌曲页面
    toSongPage(songAid) {
      this.$router.push({
        path: '/music/song',
        query: {
          songAid,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.top_div {
  width: 100%;
  height: 2em;
  background-color: #00cccc;
  color: aliceblue;
  padding-top: 2em;
  display: flex;
}
.top_title {
  width: 40%;
  // background-color: blue;
  text-align: center;
  margin-left: 3.8em;
  margin-right: auto;
  color: rgb(249, 239, 221);
  font-weight: 600;
}
.return_div {
  width: 30px;
  // background-color: blue;
  padding-left: 20px;
}
.songList_main {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.per_song {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icon_music_songlist {
  font-size: 16px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.songlist_song_num {
  font-size: 12px;
  color: #909399;
}
.line {
  width: 95%;
  height: 1px;
  background-color: #e4e7ed;
  margin-top: 10px;
  margin-bottom: 10px;
}
.song_name_singer {
  width: 280px;
  text-align: left;
  // background-color: antiquewhite;
}
.index_song_sort {
  font-size: 18px;
  color: #909399;
}
.song_name {
  color: #606266;
}
.song_singer {
  color: #909399;
  font-size: 12px;
}
</style>
